<template>
  <ul class="ClassificationNav">
    <li
      v-for="(item, index) in optionArr"
      :key="item.classsifyid"
      :classsifyid="item.classsifyid"
      @click="setRouter(index, item.classsifyid)"
      :class="[index === tempIndex ? 'shover' :  '']"
    >{{ item.value }}</li>
  </ul>
</template>
<script>
export default {
  name: "ClassificationNav",
  data() {
    return {
      optionArr: [
        {
          classsifyid: "0b32ad4f00d24ce5a7ab06ba7f65277b",
          value: "全部品牌"
        },
        {
          classsifyid: "d47c69aa99b34d17833f9cbbd3e8229c",
          value: "女鞋"
        },
        {
          classsifyid: "18e360faebea4ad593c013ce4246cb76",
          value: "男鞋"
        },
        {
          classsifyid: "076e46626fa74608bad3a68e9cfbcaad",
          value: "运动"
        },
        {
          classsifyid: "230a3bdb0af24b888d0e1a2d5255c11e",
          value: "户外"
        },
        {
          classsifyid: "489e5ee1b8f34a59bae8177db7ba565f",
          value: "童鞋童装"
        }
      ],
      tempIndex: 0
    };
  },
  methods: {
    setRouter(index, classsifyid) {
      this.tempIndex = index;
      this.$emit("set:classsifyid", classsifyid);
    }
  }
};
</script>
<style scoped>
.ClassificationNav {
  width: 1.8rem;
  top: 0.9rem;
  overflow: hidden;
  background-color: #fff;
}

.ClassificationNav li {
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.12rem;
  font-size: 0.28rem;
  text-align: center;
  border-right: 0.02rem solid #ddd;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 0.02rem solid #ddd;
  color: #666;
}

.ClassificationNav li.shover {
  color: #ff0000;
  background-color: #eee;
  border-right: 0.02rem solid #eee;
}
</style>